<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按钮</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--
        	作者：zxy
        	时间：2019-07-29
        	描述：这里讲了button的js控制
        -->
        <!--
        	data-loading-text:等待时显示的文字
        -->
        <div class="container">
        	<button type="button" data-loading-text="Loading for 3s"
        		class="btn btn-primary js-loading-btn">
        		Loading state
        	</button>
        	<!--
        		autocomplete:自动复原
        	-->
        	<button type="button" class="btn btn-default" data-toggle="button"
        		autocomplete="off">
        		Hello
        	</button>
        	
        	
        	<!--多选按钮-->
        	<div class="btn-group" data-toggle="buttons">
        		                          <!--选中的样式-->
        		<label class="btn btn-primary active">
        			<input type="checkbox" autocomplete="off"  checked/>选择1
        		</label>
        		<label class="btn btn-primary ">
        			<input type="checkbox" autocomplete="off"  />选择2
        		</label>
        		<label class="btn btn-primary ">
        			<input type="checkbox" autocomplete="off"  />选择3
        		</label>
        	</div>
        	
        	<div class="btn-group" data-toggle="buttons">
        		<label class="btn btn-primary active">
        			<input type="radio"  name="options" autocomplete="off" checked/>单选1
        		</label>
        		<label class="btn btn-primary ">
        			<input type="radio"  name="options" autocomplete="off" />单选2
        		</label>
        		<label class="btn btn-primary ">
        			<input type="radio"  name="options" autocomplete="off" />单选3
        		</label>
        		<label class="btn btn-primary ">
        			<input type="radio"  name="options" autocomplete="off" />单选4
        		</label>
        	</div>
        	
        	<!--
        		data-complete-text:完成时的文本
        	-->
        	<button type="button" data-complete-text="finish" 
        		class="btn btn-default mybutton" autocomplete="off">
        		Hello
        	</button>
        </div>
        <script type="text/javascript">
        	$(".js-loading-btn").on("click",function(e){
        		var btn=$(this).button("loading");//变成loading状态
        		setTimeout(function(e){//设置计时器
        			btn.button("reset");//复原
        		},3000)//等待时间
        	})
        	
        	$(".mybutton").on("click",function(e){
        		$(this).button("complete");//这个button完成
        	})
        </script>
	</body>
</html>
